<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :modal="modal"
    :lock-scroll="lockScroll"
    :show-close="showClose"
    :before-close="handleBeforeClose"
    :class="dialogClass"
    @close="handleClose"
    @opened="handleOpened"
    @closed="handleClosed"
  >
    <!-- 自定义头部 -->
    <template #header v-if="$slots.header">
      <slot name="header" />
    </template>

    <!-- 主体内容 -->
    <div class="dialog-content" :style="contentStyle">
      <slot />
    </div>

    <!-- 底部按钮区域 -->
    <template #footer v-if="showFooter">
      <div class="dialog-footer">
        <slot name="footer">
          <!-- 默认按钮组 -->
          <el-button @click="handleCancel" :disabled="loading">
            {{ cancelText }}
          </el-button>
          <el-button 
            type="primary" 
            @click="handleConfirm" 
            :loading="loading"
            :disabled="confirmDisabled"
          >
            {{ confirmText }}
          </el-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, watch } from 'vue'

// Props 定义
const props = defineProps({
  // 显示控制
  modelValue: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: '提示'
  },
  // 宽度
  width: {
    type: [String, Number],
    default: '50%'
  },
  // 是否显示底部
  showFooter: {
    type: Boolean,
    default: true
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: '取消'
  },
  // 确认按钮文字
  confirmText: {
    type: String,
    default: '确定'
  },
  // 确认按钮是否禁用
  confirmDisabled: {
    type: Boolean,
    default: false
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 点击遮罩是否关闭
  closeOnClickModal: {
    type: Boolean,
    default: false
  },
  // 按ESC是否关闭
  closeOnPressEscape: {
    type: Boolean,
    default: true
  },
  // 是否显示遮罩层
  modal: {
    type: Boolean,
    default: true
  },
  // 是否锁定滚动
  lockScroll: {
    type: Boolean,
    default: true
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true
  },
  // 关闭前回调
  beforeClose: {
    type: Function,
    default: null
  },
  // 自定义样式类
  dialogClass: {
    type: String,
    default: ''
  },
  // 内容区域样式
  contentStyle: {
    type: Object,
    default: () => ({})
  },
  // 最大高度
  maxHeight: {
    type: [String, Number],
    default: null
  }
})

// Emits 定义
const emit = defineEmits([
  'update:modelValue',
  'confirm',
  'cancel',
  'close',
  'opened',
  'closed'
])

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 事件处理
const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

const handleOpened = () => {
  emit('opened')
}

const handleClosed = () => {
  emit('closed')
}

const handleBeforeClose = (done) => {
  if (props.beforeClose) {
    props.beforeClose(done)
  } else {
    done()
  }
}

// 监听器
watch(() => props.maxHeight, (newVal) => {
  if (newVal) {
    const dialogContent = document.querySelector('.dialog-content')
    if (dialogContent) {
      dialogContent.style.maxHeight = typeof newVal === 'number' ? `${newVal}px` : newVal
      dialogContent.style.overflowY = 'auto'
    }
  }
}, { immediate: true })
</script>

<style scoped>
.dialog-content {
  padding: 0;
}

.dialog-footer {
  text-align: right;
  padding-top: 10px;
}

.dialog-footer .el-button {
  margin-left: 10px;
}

.dialog-footer .el-button:first-child {
  margin-left: 0;
}

:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

:deep(.el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.el-dialog__footer) {
  padding: 10px 20px 20px 20px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式 */
@media (max-width: 768px) {
  :deep(.el-dialog) {
    width: 90% !important;
    margin-top: 5vh;
  }
  
  :deep(.el-dialog__body) {
    max-height: 60vh;
  }
}
</style>